<template>
	<div class="m-b-md pagination-container">
		<ul class="pagination">
			<li :class="{'hidden': pageNo == 1}" v-show="total > pageSize">
				<a href="javascript:;" @click="setPageNo(pageNo - 1)" title="上一页">
					<i class="fa fa-chevron-left"></i>
				</a>
			</li>
			<!-- <li :class="{'hidden': pageNo == 1}" v-show="page > pagegroup">
				<a href="javascript:;" @click="setPageNo(1)" title="第一页">
					<i class="fa fa-step-backward"></i>
				</a>
			</li> -->
			<li v-for="p in grouplist" :class="{'active': pageNo == p.val}">
				<a href="javascript:;" @click="setPageNo(p.val)">
					{{ p.text }}
				</a>
			</li>
			<!-- <li :class="{'hidden': pageNo == page}" v-show="page > pagegroup">
				<a href="javascript:;" @click="setPageNo(page)" title="最后一页">
					<i class="fa fa-step-forward"></i>
				</a>
			</li> -->
			<li :class="{'hidden': pageNo == page}" v-show="total > pageSize">
				<a href="javascript:;" @click="setPageNo(pageNo + 1)" title="下一页">
					<i class="fa fa-chevron-right"></i>
				</a>
			</li>
		</ul>
		<h5 class="pull-right" style="margin-top: 28px;">共{{ total }}条 | {{ page }}页</h5>
	</div>
</template>

<script>
	export default {
		name: 'pagination',
		props: {
			total: { // 数据总条数
				type: Number,
				default: 0
			},
			pageSize: { // 每页显示条数
				type: Number,
				default: 10
			},
			pageNo: { // 当前页码
				type: Number,
				default: 1
			},
			pagegroup: { // 分页条数
				type: Number,
				default: 5,
				coerce: function(v) {
					v = v > 0 ? v : 5;
					return v % 2 === 1 ? v : v + 1;
				}
			}
		},
		computed: {
			page: function() { // 总页数
				return Math.ceil(this.total / this.pageSize);
			},
			grouplist: function() { // 获取分页页码
				var len = this.page,
					temp = [],
					list = [],
					count = Math.floor(this.pagegroup / 2),
					center = this.pageNo;
				if (len <= this.pagegroup) {
					while (len--) {
						temp.push({
							text: this.page - len,
							val: this.page - len
						});
					}
					return temp;
				}
				while (len--) {
					temp.push(this.page - len);
				}
				var idx = temp.indexOf(center);
				(idx < count) && (center = center + count - idx);
				(this.pageNo > this.page - count) && (center = this.page - count);
				temp = temp.splice(center - count - 1, this.pagegroup);
				do {
					var t = temp.shift();
					list.push({
						text: t,
						val: t
					});
				} while (temp.length);
				if (this.page > this.pagegroup) {
					(this.pageNo > count + 1) && list.unshift({
						text: '...',
						val: list[0].val - 1
					});
					(this.pageNo < this.page - count) && list.push({
						text: '...',
						val: list[list.length - 1].val + 1
					});
				}
				return list;
			}
		},
		methods: {
			setPageNo: function(idx) {
				if (this.pageNo != idx && idx > 0 && idx < this.page + 1) {
					this.pageNo = idx;
					this.$emit('onPageChange', this.pageNo);
				}
			}
		}
	}
</script>

<style>
	.m-b-md {
		margin-bottom: 20px;
	}

	.pagination {
		display: inline-block;
		padding-left: 0;
		margin: 20px 0;
		border-radius: 4px;
	}

	.pagination>li {
		display: inline;
	}

	.pagination>li>a,
	.pagination>li>span {
		position: relative;
		float: left;
		padding: 6px 12px;
		margin-left: -1px;
		line-height: 1.42857143;
		color: #337ab7;
		text-decoration: none;
		background-color: #fff;
		border: 1px solid #ddd;
	}

	.pagination>.active>a,
	.pagination>.active>a:focus,
	.pagination>.active>a:hover,
	.pagination>.active>span,
	.pagination>.active>span:focus,
	.pagination>.active>span:hover {
		z-index: 3;
		color: #fff;
		cursor: default;
		background-color: #337ab7;
		border-color: #337ab7;
	}
</style>
